<template>
  <view>
    <u-form :model="form" ref="uForm" :rules="rules" :error-type="errorType">
      
      <!-- 图片上传 -->
      <view class="container">
        <view class="font-size-16 text-9B9B9B margin-top-10">上传图片</view>
        <view class="text-9B9B9B">图片宽度和高度都不能低于500像素，至少3张，最多15张！</view>
        <u-form-item label="" v-show="false" :border-bottom="false" prop="coverImage">
          <u-input v-model="form.coverImage" :disabled="false" placeholder=""></u-input>
        </u-form-item>
      </view>
      <view class="container padding-vertical-15">
        <view class="pre-box">
          <block v-for="(item, index) in imageList" :key="index">
            <view class="pre-item">
              <image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
              <view class="u-delete-icon" @click="deleteItem(index)">
                <u-icon name="close" size="20" color="#ffffff"></u-icon>
              </view>
              <view class="default-image-box">
                <u-checkbox shape="circle" v-model="item.checked" labelColor="#FFFFFF"
                  active-color="#19be6b" label-size="24" :name="index" size="24"
                  @change="setDefault(index)">设为封面</u-checkbox>
              </view>
              <view class="default-image-box-mask"></view>
            </view>
          </block>
          <view class="pre-item">
            <u-upload 
              ref="imageUpload" 
              :action="imageUploadUrl" 
              :auto-upload="true" 
              :max-count="imageMaxCount"
              :show-upload-list="true"
              @on-success="imageUploadSuccess" 
              @on-error="uploadError">
              <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                <u-icon name="camera" size="60"></u-icon>
                <view>{{ imageUploadText }}111</view>
              </view>
            </u-upload>
          </view>
        </view>
      </view>
      <!-- /图片上传 -->
      <u-form-item label="表单项" label-width="160rpx" :border-bottom="true">
        <!-- ... -->
      </u-form-item>
    </u-form>
  </view>
</template>

<script>
import UForm from '@/node_modules/uview-ui/components/u-form/u-form.vue'
import UFormItem from '@/node_modules/uview-ui/components/u-form-item/u-form-item.vue'
import UUpload from '@/node_modules/uview-ui/components/u-upload/u-upload.vue'

export default {
  components: {
    UForm,
    UFormItem,
    UUpload
  },
  data() {
    return {
      form: {
        coverImage: ""
      },
      rules: {}, // 表单校验规则
      imageMaxCount: 10, // 最多上传多少张
      imageList: [], // 上传完成后的图片列表
      imageUploadText: "上传图片", // 上传组件的文字
      hiddImageUpload: false, // 是否隐藏上传组件
      imageIndex: 0, // 图片索引
      imageUploadUrl: 'http://127.0.0.1/dev-api/file/upload', // 上传图片的API地址
      errorType: 'border-bottom,toast', // 修改为符合要求的字符串
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  created() {
    console.log('多图组件已加载');
    this.initUploadText();
  },
  methods: {
    initUploadText() {
      console.log('初始化上传文本');
      this.imageUploadText = `${this.imageMaxCount - this.imageList.length}/${this.imageMaxCount}`;
      this.hiddImageUpload = (this.imageMaxCount - this.imageList.length) === 0;
    },
    deleteItem(index) {
      console.log(`删除图片 ${index}`);
      this.imageList.splice(index, 1);
      this.$refs.imageUpload.remove(index);
      this.initUploadText();
    },
    uploadError(error) {
      console.error('上传失败', error); // 添加调试信息
      this.$modal.msg("上传失败...");
    },
    imageUploadSuccess(response, index, lists, name) {
      console.log('上传成功', response); // 添加调试信息
      if (response.status === 200) {
        let itemData = response.data;
        itemData.url = itemData.url;
        itemData.index = index;
        this.imageList.push(itemData);
        this.initUploadText();
      } else {
        this.$modal.msg("上传失败...");
      }
    },
    setDefault(index) {
      console.log(`设为封面 ${index}`);
      this.imageList = this.imageList.map((item, _index) => {
        if (index === _index) {
          item.checked = true;
          this.form.coverImage = item.url;
        } else {
          item.checked = false;
        }
        return item;
      });
    },
  }
}
</script>

 


<style scoped>
  .container {
    padding: 0 30rpx;
  }

  .font-size-16 {
    font-size: 32rpx;
  }

  .text-9B9B9B {
    color: #9B9B9B;
  }

  .margin-top-10 {
    margin-top: 20rpx;
  }

  .padding-vertical-15 {
    padding: 30rpx 0;
  }

  .pre-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .pre-item {
    width: 160rpx;
    height: 160rpx;
    overflow: hidden;
    position: relative;
    margin-right: 10rpx;
    margin-bottom: 20rpx;
  }

  .pre-item-image {
    width: 100%;
    height: 160rpx;
  }

  .u-delete-icon {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
    z-index: 10;
    background-color: #fa3534;
    border-radius: 100rpx;
    width: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slot-btn {
    width: 160rpx;
    height: 160rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(244, 245, 246);
    border-radius: 10rpx;
    flex-direction: column;
  }

  .slot-btn__hover {
    background-color: rgb(235, 236, 238);
  }
</style>
